<template>
  <div class="echarts h-full">
    <ECharts
      v-if="option"
      :option="option"
      :id="`bar` + props.id"
      ref="barEChartsRef"
      :onClick="handleClick"
    />
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { isDarkMode } from "@/utils/index";
const emit = defineEmits(["handle-chart"]);
const routeName = useRoute().name;
const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  color: {
    type: String,
    default: () => {
      return "rgb(36,120,242)";
    },
  },
  // 单位
  xUnit: {
    type: String,
    default: () => {
      return "";
    },
  },
  // tooltip展现名称
  seriesName: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {
        title: "自定义柱状图",
        ydata: [50, 26, 10, 90, 85, 77],
        xdata: ["制造业", "建筑业", "农林牧渔", "房地产", "金融业", "居民服务"],
        month: 12,
      };
    },
  },
});
const { params, id, title, color, xUnit, seriesName } = toRefs(props);

const option = ref({});

function handleClick(param: any) {
  emit("handle-chart", param);
}

watch(
  () => params.value,
  (newValue) => {
    let rawData: any = [];
    newValue?.xdata?.map((self, selfIndex) => {
      rawData.push({
        name: self,
        value: newValue?.ydata[selfIndex],
      });
    });

    // 对数据进行降序排序
    rawData.sort((a, b) => a.value - b.value);

    // 分离排序后的值和类别名称
    const ydata1 = rawData?.map((item) => item.value);
    const xdata1 = rawData?.map((item) => item.name);

    option.value = {
      title: {
        text: title.value,
        left: "center",
        top: "8",
        // textAlign: "center",
        textStyle: {
          fontSize: 15,
          color: isDarkMode(routeName) ? "rgb(255,255,255)" : "#333",
        },
      },
      tooltip: {
        trigger: "axis",
        backgroundColor: isDarkMode(routeName) ? "rgba(0,0,0,.7)" : "#FFF",
        borderColor: "transparent",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: isDarkMode(routeName) ? "rgba(0,0,0,.7)" : "#FFF",
            fontFamily: "DINLight",
            color: isDarkMode(routeName) ? "#FFF" : "#666",
            fontSize: 13,
          },
        },
        textStyle: {
          color: isDarkMode(routeName) ? "#FFF" : "#666",
          fontFamily: "DINLight",
          fontSize: 14,
        },
      },
      grid: {
        top: title.value ? "40" : "3%",
        right: "5%",
        left: "4%",
        bottom: title.value ? "4%" : "9%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "value",
          name: "",
          // data: props.params.xdata,
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.2)",
            },
          },
          axisLabel: {
            color: isDarkMode(routeName) ? "rgba(255,255,255,.9)" : "#666",
            fontSize: 12,
            formatter: function (value) {
              return xUnit.value ? value + xUnit.value : value; // 这里的 '单位' 是你想要添加的后缀
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: isDarkMode(routeName)
                ? "rgba(255,255,255,.12)"
                : "rgba(0,0,0,.1)",
              type: "dashed",
            },
          },
          axisTick: {
            //坐标轴刻度颜色  x和y不交叉
            show: true,
          },
        },
      ],
      yAxis: [
        {
          type: "category",
          name: "",
          axisLabel: {
            //   formatter: "{value}",
            color: isDarkMode(routeName) ? "rgba(255,255,255,.9)" : "#666",
            fontSize: 12,
            //   fontFamily: "DINLight",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.12)",
              type: "dashed",
            },
          },
          data: xdata1,
        },
      ],
      series: [
        {
          name: seriesName.value ? seriesName.value : "次数",
          type: "bar",
          data: ydata1,
          barMaxWidth: "70px",
          // barWidth: "20px",
          itemStyle: {
            color: color.value,
          },
          label: {
            show: true,
            formatter: function (value) {
              return xUnit.value ? value.value + xUnit.value : value.value; // 这里的 '单位' 是你想要添加的后缀
            },
            fontSize: isDarkMode(routeName) ? 13 : 12,
            // formatter: "{c}",
            // fat
          },
        },
      ],
    };
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: calc(100% - 50px);
  border-radius: 6px;
  //   box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
}
</style>
